<template>
  <div style="max-width: 900px; margin: 0 auto;">
    <h3>请输入格式化字符串</h3>
    <el-input
      v-model="formatStr"
      placeholder="请输入学期格式化字符串"
      :rows="2"
      type="textarea"
      style="margin-bottom: 10px;"
    />
    <div style="margin-bottom: 10px; color: #888;">
      示例：{{ exampleText }}
    </div>
    <div style="margin-bottom: 10px; color: #888;" v-pre>
      说明：<br>
      支持“yyyy1”、“yyyy2”、“s”、“s_int”四个变量，分别表示学年、学年、学期、学期序号。<br>
      比如输入{{yyyy1}}-{{yyyy2}}学年第{{s_int}}学期"，输出结果样式为“2024-2025学年第2学期”。<br>
      点击“确定”后，本浏览器保存该参数，在其他电脑登录时请重新确认。<br>
    </div>
    <el-button type="primary" @click="saveFormat">确定</el-button>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

const LOCAL_KEY = 'season_format_str'
const defaultFormat = '{{yyyy1}}-{{yyyy2}}学年{{s}}季学期'
const formatStr = ref(localStorage.getItem(LOCAL_KEY) || defaultFormat)

// 示例数据
const exampleData = {
  yyyy1: 2024,
  yyyy2: 2025,
  s: '秋',
  s_int: 1
}

const exampleText = computed(() => {
  let str = formatStr.value
  str = str.replace(/\{\{yyyy1\}\}/g, exampleData.yyyy1)
  str = str.replace(/\{\{yyyy2\}\}/g, exampleData.yyyy2)
  str = str.replace(/\{\{s\}\}/g, exampleData.s)
  str = str.replace(/\{\{s_int\}\}/g, exampleData.s_int)
  return str
})

function saveFormat() {
  localStorage.setItem(LOCAL_KEY, formatStr.value)
  ElMessage.success('学期格式已保存！')
}
</script>

<style scoped>
</style> 